<template>
  <div class="container">
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage3"
      :page-size="20"
      layout="prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  props: ["total"],
  data() {
    return {
      name: "",
      currentPage3: 1,
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页${val}条`);
      this.$parent.pageSize = val;
      this.$emit("restTablefun");
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      // val传递给父组件page
      this.$parent.page = val;
      // 刷新表格
      this.$emit("restTablefun");
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  background-color: white;
  .el-pagination {
    display: flex;
    justify-content: center;
    padding: 22px 0 24px;
  }
}
</style>